<template>
  <!-- <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()"></ZwTable> -->

  <el-table ref="multipleTableRef" :data="orderlist.data" :height="tabH" :style="{ width: '100%', height: tabH, overflow: 'auto' }" stripe class="tableData" :header-cell-style="{ background: '#F9F9F9', color: '#909399' }">
    <el-table-column prop="product_name" label="产品信息" width="320">
      <template #default="scope">
        <div class="product_info">
          <el-image class="product_left" :src="scope.row.url" fit="cover">
            <template #error>
              <el-icon><icon-picture /></el-icon>
            </template>
          </el-image>
          <div class="product_right">
            <div class="product_right_name">{{ scope.row.product_name }}</div>
            <div class="product_right_stock_name">规格：{{scope.row.stock_name}}</div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="product_no" label="产品编号" width="200" />
    <el-table-column label="产品售价" width="200">
      <template #default="scope">
        <div class="name">￥{{ scope.row.sale_price }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="buy_qty" label="购买数量" width="200" />
    <el-table-column label="折扣力度" width="200">
      <template #default="scope"> {{ scope.row.discount }}% </template>
    </el-table-column>
    <el-table-column label="实付价格" min-width="200">
      <template #default="scope">
        <div>{{ scope.row.buy_price }}元</div>
      </template>
    </el-table-column>
    <template #empty>
      <div class="empty">
        <img src="@/assets/noData.png" alt="" />
        <div>暂无数据</div>
      </div>
    </template>
  </el-table>
</template>
<script lang="tsx" setup>
  // import ZwTable from '@/components/zw/table/Table'
  import { ref, withDefaults, defineProps, onMounted,reactive } from 'vue'
  import {tableH, reSize} from '@/utils/utils'
  import { deepCopy } from '@/utils/helper'
  import { useRoute } from 'vue-router'
  

  interface Props {
    orderlist: any
  }
  withDefaults(defineProps<Props>(), {
    orderlist: () => {}
  })
  const tableRef:any = ref(null)
  const tabH = ref('500px')
  const route = useRoute()

  const getTableH = () => {
    const h = parseInt(tableH('.tableOut'))
    tabH.value = h - 280 + 'px'
  }
  onMounted(() => {
    getTableH()
    reSize(getTableH)
  })
</script>

<style lang="scss" scoped>
  .product_info {
    display: flex;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    .product_left {
      width: 48px;
      height: 48px;
      margin-right: 10px;
      font-size: 48px;
      display: grid;
      place-content: center;
    }
    .product_right {
      .product_right_name {
        height: 24px;
      }
      .product_right_stock_name {
        height: 24px;
        font-size: 12px;
        color: #969696;
      }
    }
  }
  .empty {
    padding: 100px 0;
    .emty_img {
      transform: translateX(15%);
    }
  }
</style>
